<template>
  <div class="map-panel">
    <div class="panel-header">
      <h2>电子地图</h2>
      <el-tag type="success">高德地图</el-tag>
    </div>
    <div class="panel-content">
      <div id="amap-container" class="amap-container"></div>
      <div class="map-side-info">
        <h3>地图信息面板</h3>
        <ul>
          <li>当前中心：{{ center.lng }}, {{ center.lat }}</li>
          <li>缩放级别：{{ zoom }}</li>
          <li>可在地图上添加标记、扩展功能</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
const center = ref({ lng: 116.397428, lat: 39.90923 }) // 北京天安门
const zoom = ref(12)
let map: any = null

// 示例充电站数据
const stations = [
  {
    name: '充电站A',
    lng: 116.397428,
    lat: 39.90923,
    status: '空闲',
    address: '北京市东城区天安门广场',
  },
  {
    name: '充电站B',
    lng: 116.407428,
    lat: 39.91923,
    status: '使用中',
    address: '北京市西城区西单',
  },
  {
    name: '充电站C',
    lng: 116.387428,
    lat: 39.89923,
    status: '故障',
    address: '北京市朝阳区国贸',
  },
]

// 不同状态对应的颜色
const statusColor: Record<string, string> = {
  '空闲': 'green',
  '使用中': 'blue',
  '故障': 'red',
}

function loadAMapScript() {
  return new Promise<void>((resolve, reject) => {
    if ((window as any).AMap) {
      resolve()
      return
    }
    const script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'https://webapi.amap.com/maps?v=2.0&key=fff687b2b13539d0c4122b65bdd7c4b5&plugin=AMap.Marker'
    script.onload = () => {
      // 轮询等待 AMap 挂载
      const check = () => {
        if ((window as any).AMap) {
          resolve()
        } else {
          setTimeout(check, 50)
        }
      }
      check()
    }
    script.onerror = reject
    document.head.appendChild(script)
  })
}

onMounted(async () => {
  await loadAMapScript()
  map = new (window as any).AMap.Map('amap-container', {
    center: [center.value.lng, center.value.lat],
    zoom: zoom.value,
    resizeEnable: true
  })

  // 批量添加充电站标记
  stations.forEach(station => {
    const marker = new (window as any).AMap.Marker({
      position: [station.lng, station.lat],
      map,
      title: station.name,
      icon: new (window as any).AMap.Icon({
        size: new (window as any).AMap.Size(32, 32),
        image: `https://api.iconify.design/mdi:map-marker.svg?color=${statusColor[station.status]}`,
        imageSize: new (window as any).AMap.Size(32, 32),
      })
    })
    // 信息窗体
    const info = new (window as any).AMap.InfoWindow({
      content: `<div style='min-width:160px;'>
        <b>${station.name}</b><br/>
        状态：<span style='color:${statusColor[station.status]}'>${station.status}</span><br/>
        地址：${station.address}
      </div>`,
      offset: new (window as any).AMap.Pixel(0, -30)
    })
    marker.on('click', () => {
      info.open(map, marker.getPosition())
    })
  })

  // 监听地图移动
  map.on('moveend', () => {
    const c = map.getCenter()
    center.value = { lng: c.lng, lat: c.lat }
    zoom.value = map.getZoom()
  })
})
</script>

<style scoped>
.map-panel {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  padding: 1.5rem;
  min-height: 600px;
}
.panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.panel-content {
  display: flex;
  gap: 2rem;
}
.amap-container {
  width: 700px;
  height: 500px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.map-side-info {
  flex: 1;
  background: #f7f9fb;
  border-radius: 8px;
  padding: 1rem 1.5rem;
  min-width: 220px;
}
@media (max-width: 1000px) {
  .panel-content {
    flex-direction: column;
  }
  .amap-container {
    width: 100%;
    height: 300px;
  }
}
</style>